<template>
  <div class="editgameDialog">
    <el-dialog
      :visible.sync="isVisible"
      title="编辑游戏"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :modal-append-to-body="false"
      @close="closeDialog"
    >
      <div class="form">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="游戏icon" prop="iconList">
            <el-upload
              class="upload-demo"
              :action="action"
              :data="data"
              :on-exceed="gameIconExceed"
              list-type="picture"
              :before-upload="gameIconbefore"
              :on-remove="gameIconRemove"
              :on-success="gameIconSuccess"
              :limit="1"
              accept=".jpg, .png, .gif"
              :file-list="iconPreviewUrl"
            >
              <el-button size="small" plain>选择图片</el-button>
            </el-upload>
            <el-button circle class="iconAlert" @click="gameIconClain"
              >?</el-button
            >
          </el-form-item>
          <el-form-item label="分类标签" prop="gameTypesLabelChecked">
            <el-select
              v-model="ruleForm.gameTypesLabelChecked"
              placeholder="分类可多选，最多3个"
              multiple
              :multiple-limit="3"
              filterable
            >
              <el-option
                v-for="item in classifyOption"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="充值比例" prop="gameChargeLabelChecked">
            <el-select
              v-model="ruleForm.gameChargeLabelChecked"
              placeholder="请选择"
              filterable
            >
              <el-option
                v-for="item in rechargeOption"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="赠送VIP" prop="gameVipLabelChecked">
            <el-select
              v-model="ruleForm.gameVipLabelChecked"
              placeholder="请选择"
              filterable
            >
              <el-option
                v-for="item in giveVipOption"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="游戏类型" prop="gameGivenTypeLabelChecked">
            <el-select
              v-model="ruleForm.gameGivenTypeLabelChecked"
              placeholder="请选择"
            >
              <el-option
                v-for="item in giveOption"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="精品标签" prop="fineDescription">
            <el-input
              type="text"
              placeholder="请输入内容"
              v-model="ruleForm.fineDescription"
              maxlength="5"
              show-word-limit
            ></el-input>
            <el-button circle class="iconAlert" @click="labelClain"
              >?</el-button
            >
          </el-form-item>
          <el-form-item label="是否有返利" prop="isRebate">
            <el-select v-model="ruleForm.isRebate" placeholder="请选择">
              <el-option
                v-for="item in rebateOption"
                :key="item.id"
                :label="item.label"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="返利形式"
            prop="rebateGivenType"
            v-if="ruleForm.isRebate == 2"
          >
            <el-select v-model="ruleForm.rebateGivenType" placeholder="请选择">
              <el-option
                v-for="item in formOption"
                :key="item.id"
                :label="item.label"
                :value="item.id"
              ></el-option>
            </el-select>
            <el-button circle class="iconAlert" @click="rebateGivenTypeClain"
              >?</el-button
            >
          </el-form-item>
          <el-form-item
            label="最低返利金额"
            prop="rebateAmount"
            v-if="ruleForm.isRebate == 2"
          >
            <el-input
              type="text"
              placeholder="数字金额"
              v-model="ruleForm.rebateAmount"
            ></el-input>
            <el-button circle class="iconAlert" @click="miniAmountClain"
              >?</el-button
            >
          </el-form-item>
          <el-form-item
            label="返利说明"
            prop="rebateDescription"
            v-if="ruleForm.isRebate == 2"
          >
            <el-input
              type="textarea"
              placeholder="请填写返利说明"
              v-model="ruleForm.rebateDescription"
              maxlength="500"
              show-word-limit
            ></el-input>
            <el-button circle class="leftMax" @click="rebateClainshow"
              >查看标准格式</el-button
            >
          </el-form-item>
          <el-form-item label="VIP说明" prop="vipDescription">
            <el-input
              type="textarea"
              placeholder="请添加VIP说明"
              v-model="ruleForm.vipDescription"
              maxlength="1000"
              show-word-limit
            ></el-input>
            <el-button circle class="leftMax" @click="vipClainshow"
              >查看标准格式</el-button
            >
          </el-form-item>
          <el-form-item label="游戏简介" prop="gameIntroduction">
            <el-input
              type="textarea"
              placeholder="请填写游戏简介"
              v-model="ruleForm.gameIntroduction"
              maxlength="500"
              show-word-limit
            ></el-input>
          </el-form-item>
          <el-form-item label="游戏截图" prop="gameDetailImageList">
            <el-upload
              class="upload-demo"
              list-type="picture"
              :on-remove="screenshotRemove"
              :before-upload="screenshotbefore"
              :on-success="screenshotSuccess"
              :limit="5"
              :file-list="gameDetailImageUrl"
              accept=".jpg, .png"
              :action="action"
              :data="data"
              :on-exceed="screenshotExceed"
              :on-change="handleChange"
            >
              <el-button size="small" plain>选择图片</el-button>
            </el-upload>
            <el-button circle class="iconAlert" @click="screenShotClain"
              >?</el-button
            >
          </el-form-item>
          <el-form-item label="宣传图" prop="gamePublicityImageList">
            <el-upload
              list-type="picture"
              :on-remove="diagram1Remove"
              :before-upload="diagram1before"
              :on-success="diagram1Success"
              :limit="1"
              accept=".jpg, .png"
              :file-list="gamePublicityImageUrl"
              :action="action"
              :data="data"
              :on-exceed="gameIconExceed"
            >
              <el-button size="small" plain>选择图片</el-button>
            </el-upload>
            <el-button circle class="iconAlert" @click="diagramOneClain"
              >?</el-button
            >
          </el-form-item>
          <el-form-item label="新游预告图" prop="previewImageList">
            <el-upload
              list-type="picture"
              :on-remove="diagram2Remove"
              :before-upload="diagram2before"
              :on-success="diagram2Success"
              :limit="1"
              accept=".jpg, .png"
              :file-list="previewImagePreviewUrl"
              :action="action"
              :data="data"
              :on-exceed="gameIconExceed"
            >
              <el-button size="small" plain>选择图片</el-button>
            </el-upload>
            <el-button circle class="iconAlert" @click="diagramTwoClain"
              >?</el-button
            >
          </el-form-item>
          <el-form-item label="新游推荐图" prop="newRecmdImageList">
            <el-upload
              list-type="picture"
              :on-remove="diagram3Remove"
              :before-upload="diagram3before"
              :on-success="diagram3Success"
              :limit="1"
              accept=".jpg, .png"
              :file-list="recommendPreviewUrl"
              :action="action"
              :data="data"
              :on-exceed="gameIconExceed"
            >
              <el-button size="small" plain>选择图片</el-button>
            </el-upload>
            <el-button circle class="iconAlert" @click="diagramThreeClain"
              >?</el-button
            >
          </el-form-item>
          <el-form-item label="首发日期" prop="gameIssueTime">
            <el-date-picker
              v-model="ruleForm.gameIssueTime"
              type="datetime"
              placeholder="选择日期时间"
              format="yyyy-MM-dd HH:mm"
              value-format="yyyy-MM-dd HH:mm"
            ></el-date-picker>
            <el-button circle class="iconAlert" @click="onlineTimeClain"
              >?</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >保存并提交审核</el-button
            >
            <el-button type="primary" @click="saveForm('ruleForm')"
              >保存</el-button
            >
            <el-button @click="isVisible = false">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="editTips">
        <p>
          1、如资料内缺少相关标签、比例、类型等内容，请联系平台运营人员添加。
        </p>
        <p>
          2、确保格式统一化，VIP说明、返利说明等内容描述请参考早游戏APP相关游戏的排版。
        </p>
        <p>
          3、切勿填写与实际不符的资料内容，一旦发现造假、虚报等情况，情况严重者将取消合作。
        </p>
      </div>
    </el-dialog>
    <RebateClainDialog
      v-if="rebateClain.show"
      :isShow="rebateClain.show"
      @closeDialog="hiderebateClain"
    ></RebateClainDialog>
    <VipClainDialog
      v-if="vipClain.show"
      :isShow="vipClain.show"
      @closeDialog="hidevipClain"
    ></VipClainDialog>
  </div>
</template>
<script>
import { submitEditForm, saveEditMessage } from "@/api/gameManage";
import RebateClainDialog from "./rebateClain";
import VipClainDialog from "./vipClain";

export default {
  inject: ["reload"],
  data() {
    return {
      ruleForm: {
        gameId: this.dialogRow.id,
        commitAudit: "",
        iconList: "",
        gameTypesLabelChecked: [],
        gameChargeLabelChecked: "",
        gameVipLabelChecked: "",
        gameGivenTypeLabelChecked: "",
        fineDescription: "",
        rebateAmount: 0,
        isRebate: "",
        rebateGivenType: "",
        rebateDescription: "",
        vipDescription: "",
        gameIntroduction: "",
        gameDetailImageList: [],
        gamePublicityImageList: [],
        previewImageList: "",
        newRecmdImageList: [],
        gameIssueTime: "",
      },
      rules: {
        iconList: [
          { required: true, message: "请添加游戏icon", trigger: "blur" },
        ],
        gameTypesLabelChecked: [
          { required: true, message: "请选择分类标签", trigger: "change" },
        ],
        gameGivenTypeLabelChecked: [
          { required: true, message: "请选择赠送类型", trigger: "change" },
        ],
        gameChargeLabelChecked: [
          { required: true, message: "请选择充值比例", trigger: "change" },
        ],
        gameVipLabelChecked: [
          { required: true, message: "请选择赠送VIP", trigger: "change" },
        ],
        fineDescription: [
          { required: true, message: "请输入内容", trigger: "blur" },
        ],
        isRebate: [
          { required: true, message: "请选择是否返利", trigger: "blur" },
        ],
        rebateAmount: [
          { required: true, message: "请输最低返利金额", trigger: "blur" },
        ],
        rebateGivenType: [
          { required: true, message: "请选择返利形式", trigger: "blur" },
        ],
        rebateDescription: [
          { required: true, message: "请添加返利说明", trigger: "blur" },
        ],
        vipDescription: [
          { required: true, message: "请添加VIP说明", trigger: "blur" },
        ],
        gameIntroduction: [
          { required: true, message: "请添加游戏简介", trigger: "blur" },
        ],
        gameDetailImageList: [
          { required: true, message: "请添加游戏截图", trigger: "change" },
        ],
        gamePublicityImageList: [
          { required: true, message: "请添加宣传图", trigger: "change" },
        ],
        previewImageList: [
          { required: true, message: "请添加新游预告图", trigger: "change" },
        ],
        newRecmdImageList: [
          { required: true, message: "请添加新游推荐图", trigger: "change" },
        ],
        gameIssueTime: [
          { required: true, message: "请选择首发日期", trigger: "change" },
        ],
      },
      isVisible: this.isShow,
      classifyOption: this.editList.gameTypesLabelList,
      rechargeOption: this.editList.gameChargeLabelList,
      giveVipOption: this.editList.gameVipLabelList,
      rebateOption: [
        {
          id: 2,
          label: "是",
        },
        {
          id: 1,
          label: "否",
        },
      ],
      giveOption: this.editList.gameGivenTypeLabelList,
      formOption: [
        {
          id: 1,
          label: "手动申请",
        },
        {
          id: 2,
          label: "自动返利",
        },
      ],
      action: "https://cpop.zaoyx.com/api/v1/adminrebate/uploadFile",
      // action: "/api/uploadFile",
      data: {
        fileType: "image",
      },
      iconPreviewUrl: [],
      previewImagePreviewUrl: [],
      recommendPreviewUrl: [],
      gameDetailImageUrl: [],
      gamePublicityImageUrl: [],
      copyiconPreviewUrl: [],
      copypreviewImagePreviewUrl: [],
      copyrecommendPreviewUrl: [],
      copygameDetailImageUrl: [],
      copygamePublicityImageUrl: [],
      gameDetailUrlArr: [],
      uploadFalg: false,
      delectFlag: false,
      rebateClain: {
        show: false,
      },
      vipClain: {
        show: false,
      },
      delectNo: false,
      urlflag: 0,
    };
  },
  components: {
    RebateClainDialog,
    VipClainDialog,
  },
  props: {
    isShow: Boolean,
    dialogRow: Object,
    editList: Object,
  },
  mounted() {
    this.ruleForm = Object.assign(this.ruleForm, this.editList.gameDetail);
    this.iconPreviewUrl = this.editList.gameDetail.iconList;
    this.previewImagePreviewUrl = this.editList.gameDetail.previewImageList;
    this.recommendPreviewUrl = this.editList.gameDetail.newRecmdImageList;
    this.gameDetailImageUrl = this.editList.gameDetail.gameDetailImageList;
    this.gamePublicityImageUrl = this.editList.gameDetail.gamePublicityImageList;
  },
  methods: {
    saveForm(formName) {
      this.ruleForm.commitAudit = 0;
      var obj = Object.assign({}, this.ruleForm);
      if (this.copyiconPreviewUrl.length == 0) {
        obj.iconList = this.iconPreviewUrl;
      } else {
        obj.iconList = this.copyiconPreviewUrl;
      }
      if (this.copypreviewImagePreviewUrl.length == 0) {
        obj.previewImageList = this.previewImagePreviewUrl;
      } else {
        obj.previewImageList = this.copypreviewImagePreviewUrl;
      }
      if (this.copyrecommendPreviewUrl.length == 0) {
        obj.newRecmdImageList = this.recommendPreviewUrl;
      } else {
        obj.newRecmdImageList = this.copyrecommendPreviewUrl;
      }
      if (this.copygameDetailImageUrl.length == 0) {
        if (this.delectFlag == true) {
          obj.gameDetailImageList = [];
        } else {
          obj.gameDetailImageList = this.gameDetailImageUrl;
        }
      } else {
        if (this.uploadFalg == true) {
          if (this.delectNo == false) {
            obj.gameDetailImageList = this.gameDetailImageUrl.concat(
              this.copygameDetailImageUrl
            );
          } else {
            obj.gameDetailImageList = this.copygameDetailImageUrl;
          }
        } else {
          obj.gameDetailImageList = this.copygameDetailImageUrl;
        }
      }
      if (this.copygamePublicityImageUrl.length == 0) {
        obj.gamePublicityImageList = this.gamePublicityImageUrl;
      } else {
        obj.gamePublicityImageList = this.copygamePublicityImageUrl;
      }
      if (this.gameDetailUrlArr.length != 0) {
        var objArr = new Array();
        this.gameDetailUrlArr.map((item) => {
          if (item.name == undefined) {
            objArr.push(item);
          } else {
            const objfl = {};
            objfl["fileSavePath"] = item.response.data.fileSavePath;
            objfl["alt"] = item.name;
            objArr.push(objfl);
          }
        });
        obj.gameDetailImageList = objArr;
      }
      const para = Object.assign({}, obj);
      saveEditMessage(para)
        .then((res) => {
          this.$message.success("保存成功");
          setTimeout(() => {
            this.reload();
          }, 20);
          this.isVisible = false;
        })
        .catch((error) => {});
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$confirm("确定以当前资料提交审核？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
            center: true,
          })
            .then(() => {
              //确定提交发送请求
              this.ruleForm.commitAudit = 1;
              var obj = Object.assign({}, this.ruleForm);
              if (this.copyiconPreviewUrl.length == 0) {
                obj.iconList = this.iconPreviewUrl;
              } else {
                obj.iconList = this.copyiconPreviewUrl;
              }
              if (this.copypreviewImagePreviewUrl.length == 0) {
                obj.previewImageList = this.previewImagePreviewUrl;
              } else {
                obj.previewImageList = this.copypreviewImagePreviewUrl;
              }
              if (this.copyrecommendPreviewUrl.length == 0) {
                obj.newRecmdImageList = this.recommendPreviewUrl;
              } else {
                obj.newRecmdImageList = this.copyrecommendPreviewUrl;
              }
              if (this.copygameDetailImageUrl.length == 0) {
                if (this.delectFlag == true) {
                  obj.gameDetailImageList = [];
                } else {
                  obj.gameDetailImageList = this.gameDetailImageUrl;
                }
              } else {
                if (this.delectNo == false) {
                  obj.gameDetailImageList = this.gameDetailImageUrl.concat(
                    this.copygameDetailImageUrl
                  );
                } else {
                  obj.gameDetailImageList = this.copygameDetailImageUrl;
                }
              }
              if (this.copygamePublicityImageUrl.length == 0) {
                obj.gamePublicityImageList = this.gamePublicityImageUrl;
              } else {
                obj.gamePublicityImageList = this.copygamePublicityImageUrl;
              }
              const para = Object.assign({}, obj);
              console.log(para);
              saveEditMessage(para).then((res) => {
                this.$message.success("提交审核成功");
                setTimeout(() => {
                  this.reload();
                }, 20);
                this.isVisible = false;
              });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消提交",
              });
            });
        } else {
          this.$message.error("游戏信息未填写完整！");
        }
      });
    },
    closeDialog() {
      this.$emit("closeDialog");
    },
    // 游戏icon删除上传文件
    gameIconRemove(file, fileList) {
      this.ruleForm.iconList = "";
      this.iconPreviewUrl = [];
    },
    // 游戏icon上传文件
    gameIconbefore(file) {
      let _this = this;
      if (file.type.indexOf("image") < 0) {
        this.$message.error("上传图片只能是JPG或PNG格式");
        return false;
      }
      const isSize = new Promise(function (resolve, reject) {
        let width = 512;
        let height = 512;
        let _URL = window.URL || window.webkitURL;
        let img = new Image();
        img.onload = function () {
          let valid = img.width == width && img.height == height;
          valid ? resolve() : reject();
        };
        img.src = _URL.createObjectURL(file);
      }).then(
        () => {
          return file;
        },
        () => {
          this.$message.error("上传的图片不符合规格!");
          return Promise.reject();
        }
      );
      return isSize;
    },
    // 游戏icon上传成功
    gameIconSuccess(file, fileList) {
      this.copyiconPreviewUrl = [];
      this.ruleForm.iconList = file.data.fileSavePath;
      const obj = {};
      obj["fileSavePath"] = file.data.fileSavePath;
      obj["alt"] = file.data.name;
      this.copyiconPreviewUrl.push(obj);
    },
    gameIconExceed(files, fileList) {
      this.$message.warning(`当前限制只可选择 1 张图片`);
    },
    screenshotExceed(files, fileList) {
      if (fileList.length >= 5) {
        this.$message.warning(`当前限制只可选择 5 张图片`);
      }
    },
    // 上传及删除游戏截图
    screenshotRemove(file, fileList) {
      this.gameDetailUrlArr = fileList;
      if (fileList.length > 0) {
        this.delectFlag = false;
        this.copygameDetailImageUrl = [];
        fileList.map((item) => {
          const obj = {};
          obj["fileSavePath"] = item.fileSavePath;
          obj["alt"] = item.alt;
          this.copygameDetailImageUrl.push(obj);
        });
      } else {
        this.delectFlag = true;
        this.copygameDetailImageUrl = [];
      }
      this.delectNo = true;
      this.ruleForm.gameDetailImageList = fileList;
      this.uploadFalg = false;
      this.gameDetailUrlArr = this.ruleForm.gameDetailImageList;
    },
    screenshotSuccess(file, fileList) {
      const obj = {};
      obj["fileSavePath"] = file.data.fileSavePath;
      obj["alt"] = file.data.name;
      this.copygameDetailImageUrl.push(obj);
      this.ruleForm.gameDetailImageList = file.data.fileSavePath;
      this.uploadFalg = true;
    },
    handleChange(file, fileList) {
      this.gameDetailUrlArr = fileList;
    },
    screenshotbefore(file) {
      var _this = this;
      const isLt200K = file.size / 1024 < 500;
      if (!isLt200K) {
        this.$message.error("上传图片大小不能超过500K");
        return false;
      }
      if (file.type.indexOf("image") < 0) {
        this.$message.error("上传图片只能是JPG或PNG格式");
        return false;
      }
      const isSize = new Promise(function (resolve, reject) {
        var reader = new FileReader();
        reader.onload = function (event) {
          var image = new Image();
          image.onload = function () {
            var width = this.width;
            var height = this.height;
            if (
              !(width == 480 || width == 800) ||
              !(height == 800 || height == 480)
            ) {
              _this.$message.error("上传图片尺寸不符合规格");
              reject();
            }
            resolve();
          };
          image.src = event.target.result;
        };
        reader.readAsDataURL(file);
      });
      return isSize;
    },
    // 推广图1上传及删除
    diagram1Remove(file, fileList) {
      this.gamePublicityImageUrl = [];
      this.ruleForm.gamePublicityImageList = "";
    },
    diagram1before(file) {
      var _this = this;
      const isLt200K = file.size / 1024 < 500;
      if (!isLt200K) {
        this.$message.error("上传图片大小不能超过500K");
        return false;
      }
      if (file.type.indexOf("image") < 0) {
        this.$message.error("上传图片只能是JPG或PNG格式");
        return false;
      }
      const isSize = new Promise(function (resolve, reject) {
        let width = 960;
        let height = 540;
        let _URL = window.URL || window.webkitURL;
        let img = new Image();
        img.onload = function () {
          let valid = img.width == width && img.height == height;
          valid ? resolve() : reject();
        };
        img.src = _URL.createObjectURL(file);
      }).then(
        () => {
          return file;
        },
        () => {
          this.$message.error("图片尺寸不符合规格");
          return Promise.reject();
        }
      );
      return isSize;
    },
    diagram1Success(file, fileList) {
      this.copygamePublicityImageUrl = [];
      const obj = {};
      obj["fileSavePath"] = file.data.fileSavePath;
      obj["alt"] = file.data.name;
      this.copygamePublicityImageUrl.push(obj);
      this.ruleForm.gamePublicityImageList = file.data.fileSavePath;
    },
    diagram2Remove(file) {
      this.ruleForm.previewImageList = "";
      this.previewImagePreviewUrl = [];
    },
    diagram2before(file) {
      var _this = this;
      const isLt200K = file.size / 1024 / 1024 < 1;
      if (!isLt200K) {
        this.$message.error("上传图片大小不能超过1MB");
        return false;
      }

      if (file.type.indexOf("image") < 0) {
        this.$message.error("上传图片只能是JPG或PNG格式");
        return false;
      }
      const isSize = new Promise(function (resolve, reject) {
        let width = 1080;
        let height = 1920;
        let _URL = window.URL || window.webkitURL;
        let img = new Image();
        img.onload = function () {
          let valid = img.width == width && img.height == height;
          valid ? resolve() : reject();
        };
        img.src = _URL.createObjectURL(file);
      }).then(
        () => {
          return file;
        },
        () => {
          this.$message.error("图片尺寸不符合规格");
          return Promise.reject();
        }
      );
      return isSize;
    },
    diagram2Success(file) {
      this.copypreviewImagePreviewUrl = [];
      const obj = {};
      obj["fileSavePath"] = file.data.fileSavePath;
      obj["alt"] = file.data.name;
      this.copypreviewImagePreviewUrl.push(obj);
      this.ruleForm.previewImageList = file.data.fileSavePath;
    },
    diagram3Remove(file) {
      this.ruleForm.newRecmdImageList = "";
      this.recommendPreviewUrl = [];
    },
    diagram3before(file) {
      var _this = this;
      const isLt200K = file.size / 1024 < 800;
      if (!isLt200K) {
        this.$message.error("上传图片大小不能超过800kb");
        return false;
      }

      if (file.type.indexOf("image") < 0) {
        this.$message.error("上传图片只能是JPG或PNG格式");
        return false;
      }
      const isSize = new Promise(function (resolve, reject) {
        let width = 1080;
        let height = 1080;
        let _URL = window.URL || window.webkitURL;
        let img = new Image();
        img.onload = function () {
          let valid = img.width == width && img.height == height;
          valid ? resolve() : reject();
        };
        img.src = _URL.createObjectURL(file);
      }).then(
        () => {
          return file;
        },
        () => {
          this.$message.error("图片尺寸不符合规格");
          return Promise.reject();
        }
      );
      return isSize;
    },
    diagram3Success(file) {
      this.copyrecommendPreviewUrl = [];
      const obj = {};
      obj["fileSavePath"] = file.data.fileSavePath;
      obj["alt"] = file.data.name;
      this.copyrecommendPreviewUrl.push(obj);
      this.ruleForm.newRecmdImageList = file.data.fileSavePath;
    },
    // 游戏icon说明
    gameIconClain() {
      this.$alert(
        "尺寸为 512x512px，格式必须为 JPG、PNG或Gif，圆角半径 114px（不强制要求，可直接提供 512x512px 方图）",
        "游戏icon要求",
        {
          dangerouslyUseHTMLString: true,
        }
      );
    },
    // 精品标签说明
    labelClain() {
      this.$alert(
        "当游戏进入精品推荐展示栏目后，显示的自定义标签，最多填写5个汉字。",
        "精品标签要求",
        {
          dangerouslyUseHTMLString: true,
        }
      );
    },
    miniAmountClain() {
      this.$alert(
        "设置用户可以得到充值返利的最低金额；</br>用户充值达到此最低金额后，系统会自动提示用户可以享受此返利。",
        "返利金额",
        {
          dangerouslyUseHTMLString: true,
        }
      );
    },
    // 游戏截图说明
    screenShotClain() {
      this.$alert(
        "请确保每张截图尺寸一致，截图格式必须为JPG或PNG，5张：<br>游戏截图尺寸：480x800px，最大500k；<br>截图展示在游戏详情页中，位于游戏简介的下方。",
        "游戏截图要求",
        {
          dangerouslyUseHTMLString: true,
        }
      );
    },
    // 推广图1说明
    diagramOneClain() {
      this.$alert(
        "宣传图尺寸为 960x540px，格式必须为 JPG 或 PNG。最大500K；</br>请尽量将宣传的主要内容（ 如游戏Logo、主要人物等 ）控制在安全区域 888x468 内。",
        "宣传图要求",
        {
          dangerouslyUseHTMLString: true,
        }
      );
    },
    // 推广图2说明
    diagramTwoClain() {
      this.$alert(
        "新游预告图尺寸为 1080x1920px ，格式必须为 JPG 或 PNG，最大1M；</br>宣传的主要内容（ 如游戏Logo、主要人物等 ）",
        "新游预告图要求",
        {
          dangerouslyUseHTMLString: true,
        }
      );
    },
    // 新游推荐图说明
    diagramThreeClain() {
      this.$alert(
        "新游推荐图尺寸为 1080x1080px，格式必须为 JPG 或 PNG。最大800K；</br>请尽量将宣传的主要内容（ 如游戏Logo、主要人物等 ）控制在安全区域 990x990 内。",
        "新游推荐图要求",
        {
          dangerouslyUseHTMLString: true,
        }
      );
    },
    // 首发日期说明
    onlineTimeClain() {
      this.$alert(
        "首发时间务必确认无误再设置，填写错误可能会导致无法正常上线预热，如首发延期或变更，请提前联系管理员修改。",
        "首发时间提示",
        {
          dangerouslyUseHTMLString: true,
        }
      );
    },
    rebateGivenTypeClain() {
      this.$alert(
        "手动申请：需要玩家线下手动提交申请<br>自动发放：次日0点自动发放，无需申请",
        "返利形式提示",
        {
          dangerouslyUseHTMLString: true,
        }
      );
    },
    rebateClainshow() {
      this.rebateClain.show = true;
    },
    hiderebateClain() {
      this.rebateClain.show = false;
    },
    vipClainshow() {
      this.vipClain.show = true;
    },
    hidevipClain() {
      this.vipClain.show = false;
    },
  },
};
</script>
<style lang="scss">
.editgameDialog {
  .el-form-item__label {
    color: #3c3b54;
  }
  .el-upload {
    .el-button {
      padding: 10px 77px;
      color: #a5a4bf;
      border: 1px solid #a5a4bf;
      font-size: 12px;
    }
  }
  .el-form-item__content {
    .iconAlert {
      position: absolute;
      padding: 0;
      top: 5px;
      left: 230px;
      width: 30px;
      height: 30px;
      text-align: center;
      line-height: 30px;
    }
    .leftMax {
      position: absolute;
      padding: 0;
      top: 5px;
      left: 460px;
      color: #1c7231;
      border: 0;
    }
    .iconAlert,
    .el-input__inner,
    .el-textarea__inner {
      color: #a5a4bf;
      border: 1px solid #a5a4bf;
    }
    .el-input__inner::placeholder,
    .el-textarea__inner::placeholder {
      color: #a5a4bf;
    }
    .el-select,
    .el-input {
      width: 205px;
      margin-right: 22px;
    }
  }
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .el-form {
    .el-form-item {
      margin-bottom: 22px;
    }
    .el-textarea__inner,
    .el-textarea {
      width: 440px;
      height: 132px;
    }
    .el-textarea__inner::placeholder {
      font-size: 12px;
    }
  }
  .el-select {
    .el-tag.el-tag--info {
      color: #a5a4bf;
    }
  }
  .el-textarea__inner {
    resize: none;
  }
  .el-upload-list__item {
    width: 50%;
  }
  .el-dialog {
    margin-top: 3vh !important;
  }
  .editTips {
    position: absolute;
    right: 20px;
    top: 90px;
    width: 270px;
    line-height: 22px;
    color: #f74c6b;
    font-size: 13px;
  }
  .el-textarea .el-input__count {
    right: -53px;
  }
}
</style>